<template>
  <div>
    <div class="container">
      <div class="page-body">
        <div class="filter-wrap">
          <div class="filter-item-title">
            <div class="split"></div>
            <span class="title">选择阅读喜好</span>
            <div class="split"></div>
          </div>
          <div class="filter-item-wrap">
            <div class="type" v-for="(item,index) of typeData" :key="index">
              {{item.name}}
            </div>
          </div>
        </div>
        <div class="page-section page-section-spacing swiper">
          123
          <!--<swiper :indicator-dots="true" autoplay="true" circular="true" :interval="500" :duration="5000">
            <block v-for="(item,index) of backgroundImage" :key="index">
              <swiper-item>
                <image class="swiper-item" :src="item"></image>
              </swiper-item>
            </block>
          </swiper>-->
        </div>
        <div class="icon-info-wrap">
          <div class="icon-block" v-for="(item,index) of cardData" :key="index">
            <img class="block-img" :src="item.icon">
            <div class="block-text">{{item.text}}</div>
          </div>
        </div>
        <div class="book-list-wrap">
          <div class="book-list-title">精品推荐</div>
          <div class="b-tags">
            <div class="b-tags-name" v-for="(item,index) of tags" :key="index">{{item}}</div>
          </div>
          <book-card
                  v-for="(item,index) of boyList"
                  :key="index"
                  :book="item"
          ></book-card>
        </div>
      </div>
    </div>
    <!--<span class="iconfont icon-mima"></span>
    <ul>
      <li v-for="(item,index) in pageLists"
          :key="index">
        &lt;!&ndash;{{item}}&ndash;&gt;
      </li>
    </ul>-->
  </div>
</template>

<script>
  import store from '@/store'
  import http from '@/config/axios-http'
  //import http from '@/config/fetch-http'
  //import axios from 'axios'
  import BookCard from '../components/BookCard'

  export default {
    components: {
      'book-card': BookCard
    },
    name: "List",
    store,
    data() {
      return {
        cardData: [{
          icon: 'img/1.png',
          text: '免费'
        }, {
          icon: 'img/2.png',
          text: '排行'
        }, {
          icon: 'img/3.png',
          text: '分类'
        }, {
          icon: 'img/2.png',
          text: '完本'
        }],
        backgroundImage: ['img/1.jpg', 'img/2.jpg', 'img/3.jpg'],
        typeData: [{
          name: '男生小说',
          id: 'boy'
        }, {
          name: '女生小说',
          id: 'girl'
        }, {
          name: '出版书籍',
          id: 'pub'
        }],
        tags: ['科幻', '游戏', '末世', '校花'],
        boyList: ""
      }
    },
    mounted() {
      http.request({
        url: '/book/app'
      }).then((res) => {
          console.log(res)
          this.boyList = res.content
        })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/styles/global";

  .container{
    height: -webkit-fill-available;
    overflow: auto;
    font-size: rpx2rem(32);
    line-height: 1.6;
  }

  .page-body {
    width: 100%;
  }

  .page-section {
    width: 100%;
  }

  .page-section-spacing {
    box-sizing: border-box;
  }

  .swiper-item {
    display: block;
    width: 100%;
    height: 100%;
  }

  .filter-wrap {
    padding: rpx2rem(32) 0;
    background-color: #fafafa;
  }

  .filter-wrap .filter-item-title {
    text-align: center;
  }

  .filter-wrap .filter-item-title .split {
    display: inline-block;
    vertical-align: middle;
    width: rpx2rem(32);
    height: rpx2rem(2);
    background-color: #e5e5e5;
  }

  .filter-wrap .filter-item-title .split::after {
    content: '';
    position: absolute;
    height: rpx2rem(2);;
    top: 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
    left: 0;
    right: 0;
    background-color: #e5e5e5;
  }

  .filter-wrap .filter-item-title .title {
    display: inline-block;
    margin: 0 rpx2rem(30);
    font-size: rpx2rem(26);
    font-weight: 400;
    color: #8f8f8f;
  }

  .filter-wrap .filter-item-wrap {
    display: flex;
    list-style: none;
    padding: 0;
    margin-bottom: 0;
  }

  .filter-wrap .filter-item-wrap .type {
    flex: 1;
    font-size: rpx2rem(34);
    color: #242424;
    text-align: center;
  }

  .filter-wrap .filter-item-wrap .type:nth-child(2) {
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
  }

  .icon-info-wrap {
    background-color: #fafafa;
    display: flex;
  }

  .icon-info-wrap .icon-block {
    width: 25%;
    padding: rpx2rem(40) 0 rpx2rem(20);
    text-align: center;
  }

  .icon-info-wrap .icon-block .block-img {
    display: inline-block;
    width: rpx2rem(90);
    height: rpx2rem(90);
  }

  .icon-info-wrap .icon-block .block-text {
    display: block;
  }

  .book-list-wrap {
    background-color: #fafafa;
    overflow: auto;
    margin-top: rpx2rem(16);
  }

  .book-list-wrap .book-list-title {
    position: relative;
    display: block;
    font-size: rpx2rem(28);
    font-weight: 400;
    margin: 0 rpx2rem(16);
    padding: rpx2rem(14) 0;
    text-align: left;
    color: #000;
  }

  .book-list-wrap .book-list-title::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: rpx2rem(1);
    bottom: 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    transform-origin: 0 100%;
    pointer-events: none;
    left: 0;
    right: 0;
    background-color: #e5e5e5;
  }

  .book-list-wrap .b-tags {
    float: left;
    list-style: none;
    padding: rpx2rem(40) rpx2rem(16);
  }

  .book-list-wrap .b-tags .b-tags-name {
    float: left;
    display: block;
    margin-right: rpx2rem(8);
    width: rpx2rem(120);
    height: rpx2rem(60);
    line-height: rpx2rem(60);
    text-align: center;
    font-size: rpx2rem(28);
    border: rpx2rem(1) solid #e5e5e5;
    border-radius: rpx2rem(40);
  }

  .book-list-wrap .b-view-more {
    height: rpx2rem(44);
    line-height: rpx2rem(44);
    font-size: rpx2rem(28);
    color: #666;
  }

</style>